<template>
  <div class="carInfoBox">
    <div class="header">
      <el-button type="primary" icon="el-icon-circle-plus-outline" plain  @click="dialogVisible = true">新增</el-button>
      <!-- 弹出框 -->
      <el-dialog
        title="车辆配件信息---新增"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item
            label="配件编号"
            prop="id"
            :rules="[
              { required: true, message: '配件编号不能为空'},
            ]"
          >
            <el-input v-model="ruleForm.id" autocomplete="off" ref="inputa"></el-input>
          </el-form-item>
          <el-form-item
            label="配件名称"
            prop="name"
            :rules="[
              { required: true, message: '配件名称不能为空'},
            ]"
          >
            <el-input v-model="ruleForm.name" autocomplete="off" ref="inputb"></el-input>
          </el-form-item>
          <el-form-item
            label="配件数量"
            prop="num"
            :rules="[
              { required: true, message: '配件数量不能为空'},
            ]"
          >
            <el-input v-model="ruleForm.num" autocomplete="off" ref="inpute"></el-input>
          </el-form-item>
          <el-form-item
            label="配件单价"
            prop="price"
            :rules="[
              { required: true, message: '配件单价不能为空'},
            ]"
          >
            <el-input v-model="ruleForm.price" autocomplete="off" ref="inputf"></el-input>
          </el-form-item>
          </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button @click="off('ruleForm')">取 消</el-button>
          <el-button type="primary" @click="submit('ruleForm')">确 定</el-button>
        </span>
      </el-dialog>
      <el-button type="primary" icon="el-icon-upload2" plain>导出</el-button>
      <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
      <el-input
        placeholder="请输入内容"
        clearable
        v-model="input"
        >
      </el-input>
    </div>
    <el-table
    :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
    style="width: 100%">
    <el-table-column
      label="序号"
      type="index"
      width="150"
      :index="indexMethod"
      >
    </el-table-column>
    <el-table-column
      label="配件编号"
      width="220"
      >
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.accessory_code }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="配件名称"
      width="220">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>编号: {{ scope.row.accessory_code }}</p>
          <p>名称: {{ scope.row.accessory_name }}</p>
          <p>数量: {{ scope.row.campany }}</p>
          <p>单价: {{ scope.row.unit_price }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.accessory_name}}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
      label="配件数量"
      width="220"
      >
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.campany }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="配件单价"
      width="220"
      >
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.unit_price }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <!-- <el-button @click="open(scope.row)" 
          type="text" 
          size="small">
            查看
          </el-button> -->
        <el-button
          size="mini"
          type="text" 
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
            type="text"
            size="small"
            style="color: red"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- ===========抽屉=================== -->
    <el-drawer
    title="修改--车辆配件信息"
    :visible.sync="drawer"
    :direction="direction"
    :before-close="handleClose">

    <el-form :model="ruleForm1" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item
        label="配件编号"
        prop="id"
        :rules="[
          { required: true, message: '配件编号不能为空'},
        ]"
      >
        <el-input v-model="ruleForm1.id" autocomplete="off" ref="inputc"></el-input>
      </el-form-item>
      <el-form-item
        label="配件名称"
        prop="name"
        :rules="[
          { required: true, message: '配件名称不能为空'},
        ]"
      >
        <el-input v-model="ruleForm1.name" autocomplete="off" ref="inputd"></el-input>
      </el-form-item>
      <el-form-item
        label="配件数量"
        prop="num"
        :rules="[
          { required: true, message: '配件数量不能为空'},
        ]"
      >
        <el-input v-model="ruleForm1.num" autocomplete="off" ref="Ninput"></el-input>
      </el-form-item>
      <el-form-item
        label="配件单价"
        prop="price"
        :rules="[
          { required: true, message: '配件单价不能为空'},
        ]"
      >
        <el-input v-model="ruleForm1.price" autocomplete="off" ref="Pinput"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetForm1('ruleForm')">重置</el-button>
        <el-button @click="off1('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submit1('ruleForm')">确 定</el-button>
      </el-form-item>
    </el-form>

  </el-drawer>
    <!-- ==========分页器================= -->
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[8,16]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
  </div>
</template>

<script>
import {zCarPart,zUpdataCarPart,zDeleteCarPart,zCreCarPart,zSearchCarPart} from "../../apis/zyx/link"
export default {
  data(){
    return{
      //表格
      tableData:[],
      //当前页
      currentPage:1,
      //每页
      pageSize:8,
      //总共的条数
      total:2,
      //计算后的
      lastdb:"",
      //控制关闭
      dialogVisible: false,
      dialogVisible1:false,
      ruleForm: {
          id:'',
          name:'',
          num:'',
          price:''
      },
      drawer: false,
      direction: 'rtl',

      drawer1: false,
        // direction: 'rtl',
      //抽屉 
        labelPosition: 'right',
        ruleForm1: {
          id:'',
          name:'',
          num:'',
          price:''
        },

      //修改id
      updataid:"",
      input:''
    }
  },
    methods: {
      //搜索
      search(){
        // this.$refs.searchText.value
        // console.log("this.$refs.searchText.value",this.$refs.searchText.value);
        console.log("v-model",this.input);
        zSearchCarPart(this.input).then((ok)=>{
          this.input=""
          console.log("搜索",ok);
          this.tableData=ok.data.data
          this.total=ok.data.data.length
          
        })
      },

      //表格的点击事件
      //编辑
      handleEdit(index, row) {
        this.drawer = true
        console.log(index, row);
        this.updataid=row.accessory_code
        console.log("row.accessory_code",row.accessory_code);
        this.ruleForm1.id=row.accessory_code
      },
      //删除

      
      handleDelete(index, row) {
        console.log("row.accessory_code:",row.accessory_code);
        this.dialogVisible1=true

        this.$confirm('确认要删除此条吗？')
          .then(()=> {
            let detailInfo=async()=>{
              let ok=await zDeleteCarPart(row.accessory_code)
              this.$message.success("删除成功")
              console.log("删除",ok.data.data);
              this.tableData=ok.data.data
              this.total=ok.data.data.length
              this.mountlist()
              // this.currentPage=this.total/this.pageSize
            }
            detailInfo()
          })
          .catch(() => {});
        // zdeleteInfo(row.id).then((ok)=>{
        //   console.log("删除成功",ok.data);
        //   //chong
        //   this.mountlist()
        // })
      },
      //序号
      indexMethod(index) {
        return index * 1+1;
      },
      //分页器的点击事件，修改页码
      handleSizeChange(val) {
        this.currentPage = 1;
        this.pageSize = val;
        // console.log("this.pageSize",this.pageSize);
      },
      //当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        this.currentPage = val;
        // console.log("this.currentPage",this.currentPage);
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(()=> {
            done();
          })
          .catch(()=> {});
      },
      //重置按钮
      resetForm(formName){
        this.$refs[formName].resetFields();
      },
      //取消按钮
      off(formName){
        this.$refs[formName].resetFields();
        this.dialogVisible=false;
      },
      //确定按钮
      submit(formName){
        this.$refs[formName].resetFields();
        this.dialogVisible=false;
        //判断是否为空
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
            
          } else {
            // console.log('error submit!!');
            return false;
          }
        });

        let a=this.$refs.inputa.value
        let b=this.$refs.inputb.value
        let e=this.$refs.inpute.value
        let f=this.$refs.inputf.value
        
          // console.log(this.$refs.inputa.value);
          // console.log(this.$refs.inputb.value);
          // console.log(this.$refs.inpute.value);
          // console.log(this.$refs.inputf.value);
          
        // 添加

        if(a==""&&b==""&&e==""&&f==""){
          alert('增加信息不能为空')
        }
        else{
          zUpdataCarPart(a,b,e,f).then((ok)=>{
          console.log("添加成功",ok);
          this.tableData=ok.data.data       
          this.$message.success("添加成功")
          // this.currentPage=(this.total/this.pageSize)+1  
          this.tableData=ok.data.data
          this.total=ok.data.data.length  
          //重新渲染
         this.mountlist()
        });  
      }
        },
      //   zUpdataCarPart(a,b,e,f).then((ok)=>{
      //     console.log("添加成功",ok);
          
      //     this.tableData=ok.data.data
      //     if(ok.data.code=="401"){
      //       this.$message.success("添加的信息为空")
      //     }else{
      //       this.$message.success("添加成功")
      //       this.currentPage=(this.total/this.pageSize)+1
      //     }
          
      //     //重新渲染
      //    this.mountlist()
      //   });  
      // },
      //查看列表
      mountlist(){
        zCarPart().then((ok)=>{
        // console.log("成功ok",ok.data.data);
        this.tableData=ok.data.data
        this.total=ok.data.data.length
      })
      },
      


      //抽屉的取消  确定
      //重置
      resetForm1(formName){
        this.$refs[formName].resetFields();
      },
      //取消按钮
      off1(formName){
        this.$refs[formName].resetFields();
        this.drawer=false;
      },
      //修改的
      // 确定按钮
      submit1(formName){
        this.$refs[formName].resetFields();
        this.drawer=false;
        //判断是否为空
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
            
          } else {
            // console.log('error submit!!');
            return false;
          }
        });
        let c=this.$refs.inputc.value
        let d=this.$refs.inputd.value
        let n=this.$refs.Ninput.value
        let p=this.$refs.Pinput.value

        
        zCreCarPart(c,d,n,p).then((ok)=>{
          console.log("修改成功",ok.data);
        })
        this.mountlist()
        // zCreCarPart(this.updataid,this.$refs.inputc.value,this.$refs.inputd.value).then((ok)=>{
        //   console.log("修改成功",ok);
        //   this.mountlist()
        // })

      },
      //右侧【操作的 查看
      // open(){
      //   this.drawer1=true
      // }
    },
    mounted(){
      this.mountlist()
    },
}
</script>

<style scoped lang="scss">
  .carInfoBox{
    background-color: #fff;
    overflow: hidden;
  }
    ::v-deep .cell{
      text-align: center;
    }
    ::v-deep .el-pagination__total{
      color: black;
      font-weight: 700;
    }
    ::v-deep .el-pagination__jump{
      color: black;
      font-weight: 700;
    }
  .header{
    display: flex;
    margin-left:30px;
    margin-top: 20px;
    ::v-deep .el-input__inner{
      width: 150px;
    }
  }
  .block{
    margin-left:30px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  ::v-deep .el-form .el-input__inner{
    width: 250px;
  }
  ::v-deep .el-dialog__title{
    margin-left: 20px;
  }

</style>